<html lang="zh">
<head>
	<meta charset="utf-8">
	<!-- affiliate-data=myAffiliateData, app-argument=myURL -->
	<!-- <meta name="apple-itunes-app" content="app-id=000"> -->
	<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
	<meta name="viewport" content="width=device-width">
	<meta property="og:image" content="img/silk_thumb.png" />
	<link rel="image_src" type="image/png" href="img/silk_thumb.png" />
	<meta property="og:description"content="Create beautiful flowing art with Silk."/>	
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
	<link rel="stylesheet" href="css/normalize.css" />
	<link rel="stylesheet" href="css/font-awesome.css" />
	<link rel="stylesheet" href="css/ss-social.css" />
	<link rel="stylesheet" href="css/site.css" />
	<script src="js/jquery-1.8.1.min.js"></script>
	<script src="js/jquery.fullscreen.js"></script>
	<script src="js/underscore.min.js"></script>
	<script src="js/knockout-2.2.0.min.js"></script>
	<script src="js/d3.v3.min.js"></script>
	<script src="js/keymaster.js"></script>
	<script src="js/noise.js"></script>
	<script src="js/detect.js"></script>
	<script src="js/site.js"></script>

	<title>Silk  Interactive Generative Art</title>
</head>

<body data-bind="css: { 'iphone': isIPhone, 'right-side-up': isRightSideUp, 'silk-active': silkActive, 'mouse-over-previewable-controls': mouseOverControls, 'mouse-down-on-slider': mouseDownOnSlider }">
	
	<div id="fb-root"></div>
	<!-- <script>(function(d, s, id) {
		var js, fjs = d.getElementsByTagName(s)[0];
		if (d.getElementById(id)) return;
		js = d.createElement(s); js.id = id;
		js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=000";
		fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));</script> -->
	
	<div id="canvii-container">

		<div id="main-controls" class="controls-container"> 
			<div class="row btn-row share-btn-row">
				<div class="btn" id="btn-new" data-bind="click: clear, css: { visible: notPristine }">
					<span class="text">New...</span>
				</div>
			</div>

			<div class="row">

				<div class="btn silk-icon" data-bind="click: toggleFullscreen, css: { visible: notPristine }">
					<div class="contents"><i class="icon-fullscreen"></i></div>
					<div class="tt" data-bind="visible: isFullscreen">Fullscreen</div>
					<div class="tt" data-bind="visible: isNotFullscreen">Fullscreen</div>
				</div>

				<div class="btn silk-icon" data-bind="click: download, css: { visible: notPristine }">
					<div class="contents"><i class="icon-camera"></i></div>
					<div class="tt">Save Picture</div>
				</div>

				<div class="btn silk-icon" id="selected-color-icon" data-bind="click: toggleAllControls, css: { visible: notPristine }">
					<div class="contents"><i class="icon-circle"></i></div>
					<div class="tt">Controls</div>
				</div>

				<div class="btn silk-icon" data-bind="click: undo, css: { visible: notPristine, 'flip-icon': nextUndoIsRedo }">
					<div class="contents"><i class="icon-undo"></i></div>
					<div class="tt" data-bind="visible: nextUndoIsNotRedo">Undo</div>
					<div class="tt" data-bind="visible: nextUndoIsRedo">Redo</div>
				</div>
			</div>

			<div class="row controls-row download-row" data-bind="css: { visible: showDownload }">
				<p class="instructions">To save, right click the thumbnail and choose <em>Save Image As...</em>.</p>
				<img id="download-image" />
			</div>

			<div class="row controls-row color-and-symmetry-row" data-bind="css: { visible: showColorPicker }">
				<svg id="colorpicker">

				</svg>
				<div class="label" style="text-align: center;">Drag colors to blend.</div>

				<div id="symmetry-controls">
					<div class="one-d slider control" id="sym-num-rotations">
						<div class="slider-bg">
							<div class="ticks">
								<div class="tick one"></div>
								<div class="tick two"></div>
								<div class="tick three"></div>
								<div class="tick four"></div>
								<div class="tick five"></div>
								<div class="tick six"></div>
							</div>
							<div class="slider-bg-pc"></div>
						</div>
						<div class="handle"></div>
						<div class="ghost-handle"></div>
					</div>

					<div id="sym-num-rotations-label" class="label"></div>

					<div class="toggle control" id="toggle-mirror" data-bind="click: toggleMirror, css: { on: mirror }">
						<div class="description">Mirror across center</div>
						<div class="state"><span class="state-on">On</span><span class="state-off">Off</span></div>
					</div>

					<div class="toggle control" id="toggle-spiral" data-bind="click: toggleSpiral, css: { on: spiral }">
						<div class="description">Spiral towards center</div>
						<div class="state"><span class="state-on">On</span><span class="state-off">Off</span></div>
					</div>

				</div>
			</div>
		</div>


		<div id="sound-and-about" class="controls-container">
			<div class="row social-row">
				<div class="btn silk-icon" id="about-button" data-bind="click: toggleAbout, css: { visible: notPristine }">
					<div class="contents">?</div>
					<div class="tt">About</div>
				</div>

				<div class="btn silk-icon" data-bind="click: toggleMute, css: { visible: notPristine }">
					<div class="contents"><i class="icon-volume-off" data-bind="visible: false"></i><i class="icon-volume-up" data-bind="visible: false"></i></div>
					<div class="tt" data-bind="visible: muted">Muted</div>
					<div class="tt" data-bind="visible: notMuted">Mute</div>
				</div>

				<!-- notPristineAndJustCleared -->
				
				<!--
				<div class="social" data-bind="css: { visible: notPristine }">
					<div class="fb-like" data-href="https://www.facebook.com/pages/Silk/135022713223750?ref=ts&amp;fref=ts" data-send="false" data-layout="button_count" data-width="50" data-show-faces="true" data-colorscheme="dark" data-font="lucida grande"></div>

					<a href="https://twitter.com/tweetsilk" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false"></a>
					<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
				</div> -->
			</div>
			<div class="app-link-container row" data-bind="css: { visible: notPristine }">
			</div>
			<div class="row about-row" data-bind="css: { visible: showAbout }">
				<p>Silk was made by Yuri Vishnevsky, with <a href="#">music</a> and sound crafted by <a href="#">Mat Jarvis</a>.</p>

				<p>Art shared with Silk is licensed under <a href="#">Creative Commons</a>.</p>

				<p>If you enjoyed Silk, please <a href="#">let me know</a>!</p>

			</div>
		</div>

		<canvas id="silk-1" class="silk-canvas active"></canvas>
		<canvas id="silk-2" class="silk-canvas buffer"></canvas>
		<canvas id="sparks"></canvas>

	</div>

	
	<div id="replay-thumbnail" data-bind="css: { visible: showingReplayThumbnail }, click: hideReplayThumbnail ">
		<img data-bind="attr: { src: shareUrlThumbnail }" width="150" />
		<div class="tt">Hide thumbnail</div>
	</div>


	<div id="intro-center" data-bind="css: { visible: showIntro }">
		<img class="logo" src="img/silk_text.png" width="250" height="250" />
	</div>

	<div id="intro-draw-something" data-bind="css: { visible: showIntro }">
		<!-- <div id="instructions">Draw something.</div> -->
		<img class="draw-something" src="img/draw_something.png" width="250" height="29" />
	</div>
	<div id="intro-mute-option" data-bind="css: { visible: false }">
		<em>Note</em> &mdash; Silk has sound. 
		<a href="#" data-bind="visible: muted, click: toggleMute">Muted</a><span data-bind="visible: muted">.</span>
		<a href="#" data-bind="visible: notMuted, click: toggleMute">Mute?</a>
	</div>

	<div id="tips">
		<div class="tip">Press <b>Space</b> to start anew.</div>
		<div class="tip">Press <b>Z</b> to undo.</div>

		<!-- <div class="tip"><i class="icon-undo"></i> lets you travel back in time.</div> -->
		<!-- <div class="tip"><i class="icon-circle"></i> unlocks colors and symmetries.</div> -->

		<div class="magic tip">Try different colors and symmetries.</div>
		<div class="tip">Sally forth, you weaver of wonder, sower of silken waves.</div>
	</div>

	<audio id="bg-music" preload="auto" loop="true" >
		<source src="#" type='audio/mp4; codecs="mp4a.40.5"'/>
		<source src="#" type='audio/ogg; codecs="vorbis'/>
	</audio>

	<audio id="bg-music-intro" preload="auto">
		<source src="#" type='audio/mp4; codecs="mp4a.40.5"'/>
		<source src="#" type='audio/ogg; codecs="vorbis'/>
	</audio>

	<!--<script src="js/js.js" type="text/javascript"></script>
	<script type="text/javascript">try{ clicky.init(66625145); }catch(e){}</script>
	<noscript><p><img alt="Clicky" width="1" height="1" src="img/66625145ns.gif" /></p></noscript>-->

</body>
</html>